<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消息界面</title>
    <link rel="stylesheet" href="./iconfont.css">
    <style>
        body{
            margin: 0;
            padding: 0;
        }
            .ljyleft{
            width: 20%;
            height: 100%;
            position: fixed;
        }
            #fixed1{
            width: 14%;
            height: 25px;
            padding: 5px 10px;
            font-size: 16px; 
            border: 1px solid gray; 
            border-radius: 20px;/*圆角*/
            position: fixed; 
            top: 90px; 
            left: 10px;
            outline: none;
            transition: background-color 0.3s;
        }
        #fixed2{
            width: 14%;
            height: 25px;
            padding: 5px 10px;
            font-size: 16px; 
            border: 1px solid gray; 
            border-radius: 20px;/*圆角*/
            position: fixed; 
            top: 135px; 
            left: 10px;
            outline: none;
            transition: background-color 0.3s;
        }
        #fixed3{
            width: 14%;
            height: 25px;
            padding: 5px 10px;
            font-size: 16px; 
            border: 1px solid gray; 
            border-radius: 20px;/*圆角*/
            position: fixed; 
            top: 180px; 
            left: 10px;
            outline: none;
            transition: background-color 0.3s;
        }
        #fixed4{
            width: 14%;
            height: 25px;
            padding: 5px 10px;
            font-size: 16px; 
            border: 1px solid gray; 
            border-radius: 20px;/*圆角*/
            position: fixed; 
            top: 800px; 
            left: 10px;
            outline: none;
            transition: background-color 0.3s;
        }
        #fixed5{
            width: 14%;
            height: 25px;
            padding: 5px 10px;
            font-size: 16px; 
            border: 1px solid gray; 
            border-radius: 20px;/*圆角*/
            background-color: red;
            position: fixed; 
            top: 225px; 
            left: 10px;
            outline: none;
            text-align: center;
            transition: background-color 0.3s;
        }
        #fixed1:hover{
            background-color: rgb(117, 108, 108);
        }
        #fixed2:hover{
            background-color: rgb(117, 108, 108);
        }
        #fixed3:hover{
            background-color: rgb(117, 108, 108);
        }
        #fixed4:hover{
            background-color: rgb(117, 108, 108);
        }
        #fixed5:hover{
            background-color: rgb(201, 104, 104);
        }
        .icon{
            width: 100px;
            height: 80px;
            overflow: hidden;
            z-index: 1;
            position: relative;
            left: 10px;
        }
        .icon-xiaohongshu {
            width: 100px;
            height: 80px;
            overflow: hidden;
            z-index: 1;
            position: relative;
            left: 10px;
            margin-top: 0px;
        }
        /* 右边 */
        .ljyright{
            width: 80%;
            height: 941.33px;
            position: relative;
            left: 20%;
        }
        .search-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 600px;
            max-width: 600px;
            margin: 10px ;
            margin-left: 100px;
            padding: 10px;
            background-color: #f5f5f5;
            border-radius: 40px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .search-box input[type="text"] {
            flex-grow: 1;
            padding: 10px;
            border: none;
            background-color: transparent;
            outline: none;
        }
        .search-box input[type="submit"] {
            padding: 10px;
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .search-box input[type="submit"]:hover {
            background-color: #e60023; /* 小红书的主题色，深色版本 */
        }
        .search-box:hover{
            border: #e60023 1px solid;
        }
        /* 评论 */
        .tab-button {
            width: 70px;
            height: 30px;
            display: inline-block;
            padding: 15px 15px;
            margin-right: 10px;
            cursor: pointer;
            border-radius: 50px;
            text-decoration: none;
            color: black;
            background-color: white;
            position: relative;
            left: 160px;
            transition: background-color 0.8s ease, color 0.8s ease; /* 添加滑动效果 */
        }

        .tab-button.active {
            background-color: gray;
            color: white;
        }
        .tab-button:hover {
            color: lightgray;
            transition: color 0.3s ease; /* 添加滑动效果 */
        }

        .tab-content {
            width: 100%;
            height: 720px;
            background-color: #ffffff;
            display: none;
            padding: 20px;
            border-radius: 4px;
            position: relative;
            top: 10px;
        }
       .tab-content.active {
            display: block;
        }
        /* 关注 */
        .follower-list {
            width: 100%;
            max-width: 880px;
            margin: 0 auto;
            padding: 20px;
            margin-left: 50px;
        }
        .follower-item {
            display: flex;
            justify-content: space-between;
            padding: 15px;
            margin-bottom: 10px;
            border-radius: 4px;
            border-bottom: 1px solid #908c8c;
        }
        .follower-item img {
            width: 50px;
            height: 50px;
            border-radius: 25px;
            margin-right: 15px;
            object-fit: cover;
        }
        .follower-info {
            flex-grow: 1;
        }
        .button {
            padding: 10px 20px;
            color: white;
            border-radius: 20px;
            text-decoration: none;
        }
        .follow-back {
            background-color: #ff0101;
        }
        .mutual-follow {
            background-color: #dcdcdc;
            color: black;
        }
        .end-message {
            text-align: center;
            margin-top: 30px;
            color: gray;
            position: relative;
            right: 250px;
        }
        /* 下拉菜单 */
        .text{
            width: 100px;
            height: 30px;
            text-align: center;
            margin-left: 90%;
            margin-top: -30px;
        }
        .dropbtn {
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }
        /* 下拉按钮悬停效果 */
        .dropbtn:hover, .dropbtn:focus {
            background-color: #2980b9;
        }
        /* 下拉内容容器样式 */
        .dropdown {
            position: relative;
            display: inline-block;
        }   
        /* 下拉内容样式 */
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            margin-left: -20px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }
        /* 下拉内容中的链接样式 */
        .dropdown-content a {  
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }
        /* 下拉内容中的链接悬停效果 */
        .dropdown-content a:hover {background-color: #f1f1f1}
        /* 显示下拉菜单 */
        .show {
            display: block;
        }
    </style>
</head>
<body>
    <div class="ljyleft">
        <div class="icon">
            <svg class="icon-xiaohongshu" aria-hidden="true">
                <use xlink:href="#icon-xiaohongshu"></use>
            </svg>
        </div>
        <div id="fixed1"><a href="https://www.baidu.com/">
            <span class="iconfont icon-faxian"> 发现</span>
            <img src="" alt="">
            <div class="mask"></div>
        </a></div>
        <div id="fixed2"><a href="#">
            <span class="iconfont icon-fabu"> 发布</span>
            <img src="" alt="">
            <div class="mask"></div>
        </a></div>
        <div id="fixed3"><a href="#">
            <span class="iconfont icon-tongzhi"> 通知</span>
            <img src="" alt="">
            <div class="mask"></div>
        </a></div>
        <div id="fixed4"><a href="#">
            <span class="iconfont icon-gengduo"> 更多</span>
            <img src="" alt="">
            <div class="mask"></div>
        </a></div>
        <div id="fixed5"><a href="#">
            <span>登录</span>
            <img src="" alt="">
            <div class="mask"></div>
        </a></div>
    </div>
    <div class="ljyright">
        <div class="ljyuse">
        <div class="search-box">
            <input type="text" name="query" placeholder="搜索笔记、商品和用户">
            <input type="submit" value="搜索">
        </div>
        <div class="text">
            <span onclick="toggleDropdown()">创作中心</span>
                <div id="myDropdown" class="dropdown-content">
                    <a href="#">创作服务</a>
                    <a href="#">电脑直播</a>
                    <a href="#">电脑直播助手</a>
                </div>
        </div>
        </div>
          <a href="#" class="tab-button" data-target="#comments">评论和@</a>
          <a href="#" class="tab-button" data-target="#likes">赞和收藏</a>
          <a href="#" class="tab-button active" data-target="#follows">新增关注</a>
      
          <div id="comments" class="tab-content">
              <p>暂时还没有更多内容</p>
          </div>
          <div id="likes" class="tab-content">
              <p>暂时还没有更多内容</p>
          </div>
          <div id="follows" class="tab-content active">
            <div class="follower-list">

            </div>
            <div class="end-message">- THE END -</div>
          </div>

<script>
    const data =
    [
    {
        "profilePicture": ".\\奇奇怪怪、可可爱爱、很特别的头像分享_1_畅畅的美图文案馆_来自小红书网页版.jpg",
        "username": "阿尼亚",
        "followDate": "08-15",
        "buttonType": "mutual-follow",
        "buttonText": "互相关注"
    },
    {
        "profilePicture": ".\\奇奇怪怪、可可爱爱、很特别的头像分享_2_畅畅的美图文案馆_来自小红书网页版.jpg",
        "username": "洛",
        "followDate": "06-20",
        "buttonType": "mutual-follow",
        "buttonText": "互相关注"
    },
    {
        "profilePicture": ".\\微信图片_20241217200419.png",
        "username": "大头儿子",
        "followDate": "03-30",
        "buttonType": "mutual-follow",
        "buttonText": "互相关注"
    },
    {
        "profilePicture": ".\\微信图片_20241217200423.jpg",
        "username": "星遇",
        "followDate": "07-14",
        "buttonType": "mutual-follow",
        "buttonText": "互相关注"
    },
    {
        "profilePicture": ".\\微信图片_20241217200426.jpg",
        "username": "中秋",
        "followDate": "03-24",
        "buttonType": "follow-back",
        "buttonText": "回关"
    },
    {
        "profilePicture": ".\\微信图片_20241217200430.jpg",
        "username": "强哥",
        "followDate": "08-23",
        "buttonType": "follow-back",
        "buttonText": "回关"
    },
    {
        "profilePicture": ".\\微信图片_20241217200433.jpg",
        "username": "没错是我",
        "followDate": "04-23",
        "buttonType": "follow-back",
        "buttonText": "回关"
    }
]

    const followerList = document.querySelector('.follower-list');
    // 遍历数据并生成HTML
    data.forEach(item => {
        const followerItem = document.createElement('div');
        followerItem.classList.add('follower-item');
        followerItem.innerHTML = `
            <img src="${item.profilePicture}" alt="Profile Picture">
            <div class="follower-info">
                <strong>${item.username}</strong><br>
                开始关注你了 ${item.followDate}
            </div>
            <a href="#" class="button ${item.buttonType}">${item.buttonText}</a>
        `;
        followerList.appendChild(followerItem);
    });
</script>
           <!--标签切换-->
        <script>
            const tabButtons = document.querySelectorAll('.tab-button');
            tabButtons.forEach(button => {
                //监听点击事件
                button.addEventListener('click', () => {
                    tabButtons.forEach(btn => btn.classList.remove('active'));
                    button.classList.add('active');
                    const targetContentId = button.dataset.target;
                    const contents = document.querySelectorAll('.tab-content');
                    contents.forEach(content => content.style.display = 'none');
                    document.querySelector(targetContentId).style.display = 'block';
                });
            });
        </script>   
        <!--下拉菜单-->
        <script>
            function toggleDropdown() {
            var dropdown = document.getElementById("myDropdown");
            if (dropdown.style.display === "block") {
                 dropdown.style.display = "none";
            } 
            else {
                dropdown.style.display = "block";
            }
        }
            // 点击下拉菜单外部时关闭菜单
            window.onclick = function(event) {
            if (!event.target.matches('.text span')) {
                var dropdowns = document.getElementsByClassName("dropdown-content");
                for (var i = 0; i < dropdowns.length; i++) {
                    var openDropdown = dropdowns[i];
                    if (openDropdown.style.display === "block") {
                        openDropdown.style.display = "none";
                    }
                }
            }
            }
        </script>
    </div>
    <script src="./iconfont.js"></script>
</body>
</html>